import './index.css'
import React, {useState} from "react";
import {useNavigate} from "react-router-dom";
import {DashboardData} from "../../Datasource";
import {Card, Space, List, Button, SearchBar} from 'antd-mobile'


//首页
const Dashboard = () => {
    const navigate = useNavigate()

    return (
        <div className={'dashboard-card'}>
            <SearchBar placeholder='机房名称' style={{marginBottom:12,'--background': '#ffffff'}}/>
            <Space direction='vertical' block>
                {
                    DashboardData.map(e => <Card key={e.id} title={<div className={'card-add'}>
                        <div>{e.name}</div>
                        <Button size='mini' color='primary' className={'card-add-button'} onClick={() => {
                            navigate(`/device/add/${e.id}`)
                        }}>新增</Button>
                    </div>}>
                        <List className={'card-content'}>
                            {
                                e.data.map(a => <List.Item extra={a.name}
                                                           key={a.id}
                                                           onClick={() => {
                                                               navigate(`/deviceInfo/${e.id}/${a.id}`)
                                                           }}>
                                    {a.machineRoom}
                                </List.Item>)
                            }
                        </List>
                    </Card>)
                }
            </Space>
        </div>
    )
}

export default Dashboard
